
class MutationObserverHelp {
  observer_ = null
  // childList ：布尔值，默认为 false。设置为 true 时，表示观察目标节点的子节点列表的变化，包括添加或删除子节点。
  // attributes ：布尔值，默认为 false。设置为 true 时，表示观察目标节点的属性变化。
  // characterData ：布尔值，默认为 false。设置为 true 时，表示观察目标节点文本内容的变化。
  // subtree ：布尔值，默认为 false。设置为 true 时，表示观察目标节点以及其所有后代节点的变化。
  // attributeFilter ：数组，用于指定要观察的属性名。如果不设置此选项，则观察目标节点的所有属性变化。
  // attributeOldValue ：布尔值，默认为 false。如果设置为 true，则在回调函数的 MutationRecord 对象中包含被修改属性的旧值。
  // characterDataOldValue ：布尔值，默认为 false。如果设置为 true，则在回调函数的 MutationRecord 对象中包含被修改的文本节点的旧值。

  defaultOption_ = { childList: true, characterData: true, subtree: true }
  constructor() {
    this.init()
  }
  init() {
    this.observer_ = new MutationObserver((mutationsList, observer) => {
      // for (const mutation of mutationsList) {
      //   // if (mutation.type === 'childList') {
      //   //   console.log('子元素发生变化！', mutation, observer)
      //   // } else if (mutation.type === 'attributes') {
      //   // }
      //   const { target, type } = mutation
      //   // INPUT
      //   const tempStr = `
      //   *************************************************************************************
      //   **       target type:${type}
      //   **       target nodeName:${target.nodeName}
      //   **       target tagName:${target.tagName}
      //   **       target id:${target.id}
      //   **       target value:${target.value}
      //   **       target innerHTML:${target.innerHTML}
      //   **       target innerText:${target.innerText}
      //   **       target outerHTML:${target.outerHTML}
      //   *************************************************************************************
      //   `
      //   console.log('mutation:', mutation)
      //   // console.log('**       observer:', observer)
      //   console.log(tempStr)
      // }
      // console.log('******************* MutationObserverHelp *******************', mutationsList)

      const tempUrl = `${location.origin}/vesion.json?t=${Date.now()}`
      fetch(tempUrl).then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json(); // 如果响应是JSON格式
      })
      .then(data => {
        const newVersion = document.getElementById('version').innerHTML
        // console.log(data.version, newVersion) // 处理数据   location.reload(true)
        localStorage.setItem('versionInfo', data.version)
        if (data.version != newVersion) {
          // location.reload(true)
        }
      })
      .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
      })

    })
  }
  createListenElement(elementID, option = {}) {
    const tempOption = Object.assign({}, this.defaultOption_, option)
    this.observer_.observe(document.getElementById(elementID), tempOption)
  }
}

(() => {
  window.onload = function() {
    const moh = new MutationObserverHelp()
    moh.createListenElement('app')
  }
})()
